<template>
    <div id="icontent">
        <div id="container">
            <div class="info">
                <div class="input-item">
                    <div class="input-item-prepend">
                        <div class="input-item-text"></div>
                    </div>
                    <input id='tipinput' type="text" v-model="search_keyword">
                </div>
            </div>
        </div>
        <div class="search_content">
            <div class="search_top">
                <RadioGroup class="search_button" v-model="city_button" type="button">
                    <Radio label="上海"></Radio>
                    <Radio label="北京" disabled></Radio>
                    <Radio label="深圳" disabled></Radio>
                    <Radio label="杭州" disabled></Radio>
                </RadioGroup>
                <Select v-model="page_c" style="width:80px;margin: 10px 0 0 auto;">
                    <Option v-for="item in page_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Button style="margin: 10px 10% 0 auto;" type="primary" @click="flush_data()">刷新数据</Button>
                <!-- <Input id="search_input" class="search_input" v-model="search_keyword" search placeholder="搜索..." @on-enter="search_fuc()" @click="search_fuc()"/> -->
                <Input class="search_input" v-model="search_keyword" search placeholder="搜索..." @on-enter="search_fuc()" @input="getdouban_data()">
                    <Button slot="append" icon="ios-search" @click="search_fuc()"></Button>
                </Input>
            </div>
            <div class="search_bootom">
              <!-- <frameset cols="100%">
                <frame src="https://www.baidu.com" style="width：100%；height:100%;overflow:hidden;"/>
              </frameset> -->
              <!-- <iframe name="ifraRight" id="ifraRight"  src="https://www.baidu.com" frameborder="0" onload ="javascript:getWidth()" scrolling="yes"></iframe> -->
              <ul class="data_ul">
                <li v-for="data in doubandata"><a :href="data.href" target="_blank">{{data.title}}</a></li>
              </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { getdoubandata, setkey } from '@/api/douban'
    import AMap from 'AMap'
    import store from '@/store'
    import Vue from 'vue'
    Vue.use(AMap)
    export default {
        name: "douban_map",
        data () {
            return {
                city: '上海',
                city_button: '上海',
                page_list: [
                    {
                        value: '10',
                        label: '10页'
                    },
                    {
                        value: '20',
                        label: '20页'
                    },
                    {
                        value: '40',
                        label: '40页'
                    }
                    ],
                page_c: '10',
                search_keyword: '',
                map: '',
                doubandata: []
            }
        },
        mounted:function () {
            this.city = '上海'
            this.init()
        },
        methods: {
            getdoubaninfo (keyword) {
                getdoubandata(keyword).then(response => {
                    const data = response.data
                    this.doubandata = data
                }).catch(() => {
                })
            },
            setrediskey (addr,page) {
                setkey(addr,page).then(response => {
                    const data = response.data
                }).catch(() => {
                })
            },
            init:function () {
                var map = new AMap.Map('container',{
                  resizeEnable: true,
                  zoom:12,
                  center: [121.469153, 31.231344]
                })
                this.map = map
                var city = this.city
                AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'], function(){
                    // 实例化Autocomplete
                    var autoOptions = {
                        //city 限定城市，默认全国
                        city: city,
                        input: "tipinput"
                    }
                    // 搜索时的自动联想
                    var autoComplete= new AMap.Autocomplete(autoOptions);
                    AMap.Autocomplete({
                        city: city,
                        input: "search_input"
                    });
                    var placeSearch = new AMap.PlaceSearch({
                        city: city,
                        map:map
                    })
                    AMap.event.addListener(autoComplete, 'select', function(e){
                        //TODO 针对选中的poi实现自己的功能
                        placeSearch.search(e.poi.name)
                    })
                    // placeSearch.search('迪士尼')
                })
            },
            new_search (keyword) {
                var map = this.map
                AMap.plugin('AMap.PlaceSearch', function(){
                    var placeSearch = new AMap.PlaceSearch({
                        city: '上海',
                        map:map
                    })
                    placeSearch.search(keyword)
                })
            },
            search_fuc () {
                this.getdoubaninfo(this.search_keyword)
            },
            flush_data () {
              console.log('刷新数据被点击了')
              this.setrediskey('',this.page_c)
            },
            getdouban_data () {
              this.getdoubaninfo(this.search_keyword)
            }
        },
        watch:{
            search_keyword(val, oldVal){ //普通的watch监听
                this.getdoubaninfo(val)
            },
        },
        created: function() {
          this.getdoubaninfo()
        }
    }
</script>

<style scoped>
#icontent{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#container{
    float: left;
    width: 62%;
    height: 100%;
    position: relative;
}
.info{
    height: 26px;
    line-height: 26px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10000;
}
.input-item{
    overflow: hidden;
}
.input-item-prepend{
    float: left;
}
.input-item-text{
    height: 26px;
    line-height: 26px;
    color: blue
}
#tipinput{
    width: 200px;
    /* background-color: transparent; */
    /* background:none;   */
    outline:none;
}
.search_content{
    float: right;
    width: 38%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.search_top{
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.search_bootom{
    width: 100%;
    height: calc(100% - 100px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-y: scroll;
}
.search_bootom::-webkit-scrollbar {
    display: none;
}
.search_input{
    width: 80%;
    margin: 10px 10% 0 10%;
}
.search_button{
    margin: 10px auto 0 10%;
}
.data_ul{
  margin: 0 10% 0 10%;
  padding: 0;
  list-style: none;
}
/* .data_ul li a{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
} */
</style>
